<template>
    <div>
			
		<mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
			<div id='dataList0'>
				<div v-for="(item,index) in tab0.list" @click="btn(item.id)">
					<div class="top">
						<div class="left">
							<p>{{item.good_name}}</p>
							<p>{{item.addtime}}</p>
						</div>
						<div class="right">
							
							<div style="width: 100%;float: right">
								<p class="gre" v-if="item.payment==1||item.payment=='1'">微信支付</p>
								<p class="blu" v-else>赛思币</p>
							</div>
							<p v-if="item.payment==1||item.payment=='1'">消费: ¥{{item.amount}}</p>
							<p v-else>消费: {{item.amount}}</p>
						</div>

					</div>
					<!-- <p class="p1"></p> -->
				</div>
			</div>
		</mescroll-vue>
    </div>


</template>

<script>
	import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
        name: "Xfjilu",
		components: {
		  MescrollVue
		},
      data(){
          return{
						imgSrc: require("../../assets/img/kongbai.png"), 
						tabType: 0 ,// 菜单类型
						tab0: {mescroll: null, list: [], isListInit: false}, // 全部
						chenload:false,
						arr:['1','1','1'],
						feeRecordarr:[],
						allLoaded:false,
						page:1,
          }
      },
     methods:{
       btn(id){
         this.$router.push({
           path:'/xfmx',
			query:{
				id:id
			}
         })
       },
	   mescrollInit0 (mescroll) {
	     mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
	     this.tab0.mescroll = mescroll;
	   },
	   
	   getMescrollUp (tabType) {
	     let emptyWarpId = 'dataList' + tabType;
	     return {
	       auto: true,
	       callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
	       noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
		   empty: {
		     warpId: emptyWarpId, // 父布局的id;
		     icon: this.imgSrc, // 图标,默认null
		     tip: '您暂未有购买记录', // 提示
		     
		   },
	     }
	   },
	   upCallback (page, mescroll) {
	     if (mescroll.tabType === 0) {
	       // 全部
	       this.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
	   		this.axios.get(this.$store.state.url +'User/feeRecord',{
	   			 params:{
	   				page: page.num,
	   				limit:20
	   			 }
	   		 }).then(res=>{
	   							// console.log(res.data.data.class)
	   			this.chenload = true;
	   			if(res.data.errcode==0||res.data.errcode=='0'){
					var curPageData = res.data.data.order;
					mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					 if (page.num === 1) this.tab0.list = []; // 如果是第一页需手动制空列表
					 this.tab0.list = this.tab0.list.concat(curPageData); // 追加新数据
					 // this.tab0.list=res.data.data.order
	   			}
	   		
	   		})
	     }
	   },
	   
     },
		 mounted(){
			 this.sdk.getJSSDK('','',this.$store.state.url);	
		 }
		
    }
</script>

<style scoped>
	.mescroll {
	  position: fixed;
	  top: 0rem;
	  bottom: 0;
	  height: auto;
	}
  .kong{
    width: 2.8rem;
    margin-top: 36%;
  }
    .top{
      width: 92%;
      margin: auto;
      margin-top: 0.4rem;
      display: flex;
      justify-content: space-between;
	  border-bottom: 1px solid #ededed;
	  padding-bottom: .43rem;
    }

  .left p:nth-child(1){
    width: 5rem;
    overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
    font-size:0.3rem;
    color:rgba(51,51,51,1);
  }
  .left p:nth-child(2){
    font-size:0.24rem;
    color:rgba(153,153,153,1);
    line-height:0.32rem;
    margin-top: 0.3rem;
  }
  .gre{
    width:1.2rem;
    height:0.32rem;
    background:rgba(88,188,70,1);
    border-radius:0.16rem;
    text-align: center;
    line-height: 0.32rem;
    color: #fff;
    font-size: 0.24rem;
    float: right;
    margin-top: 0.03rem;
  }
  .blu{
    width:1.2rem;
    height:0.34rem;
    background:#0287FF;
    border-radius:0.16rem;
    text-align: center;
    line-height: 0.34rem;
    color: #fff;
    font-size: 0.24rem;
    float: right;
    margin-top: 0.03rem;
  }
  .right p:nth-child(2){
    font-size:0.26rem;
    color:rgba(51,51,51,1);
    margin-top: 0.62rem;
  }
    .p1{
      width: 92%;
      margin: auto;
      height: 0.01rem;
      background: #EDEDED;
      margin-top: 0.4rem;
    }
</style>
